<template>
  <div style="height: 100%; width: 100%; overflow: auto">
    <el-row class="oneRow"
      ><!--搜索框-->
      <el-col class="icon">
        <img src="../../../assets/img/common/search.png" class="search-icon" />
      </el-col>
      <el-col class="input">
        <input class="input-style" v-model="keywords"/>
      </el-col>
      <el-col class="btn">
        <button class="search-btn" @click="searchBooks">搜索</button>
      </el-col>
    </el-row>
    <el-row class="secondRow"
      ><!--分享清单-文字-->
      <span class="title">分享清单</span>
    </el-row>
    <el-row class="threeRow"
      ><!--表格-->
      <el-table
        :data="bookShareList"
        style="width: 100%;"
        :row-class-name="tableRowClassName"
        border
        :cell-style="tableCellStyle"
        :header-cell-style="tableHeaderCellStyle"
      >
        <el-table-column prop="name" label="书籍名称" width="180">
        </el-table-column>
        <el-table-column prop="author" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="output" label="出版社"> </el-table-column>
        <el-table-column prop="dateShare" label="分享时间"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="money" label="收益金额"> </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "myShare",
  mounted(){
    this.getShareBook()

  },
  data() {
    return {
      border: true,
      userId:'24123',
      bookShareList: [],
      keywords:''
    };
  },
  methods: {
    //设置表格斑马纹颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 1) {
        return "custom_stripe";
      } else {
        return "";
      }
    },
    // 修改 table cell边框的背景色 整个表格body
    tableCellStyle() {
      return "border-color: rgba(204, 204, 204, 1);text-align: center;";
    },
    // 修改 table header cell的背景色  第一行
    tableHeaderCellStyle() {
      return "border-color: rgba(204, 204, 204, 1); background-color: rgba(168, 189, 203, 0.6);color:rgba(0, 0, 0, 1);text-align: center;";
    },
    getShareBook(){
      axios({
        method:'get',
        url:'http://localhost:5000/reader/myShare',
        params:{
            'userId':this.userId
        }
       
    }).then(r=>{//发送成功
        this.bookShareList=r.data.data
        console.log(this.bookShareList)
    }).catch(r=>{
        console.log(r)
    })
    },
    searchBooks(){
      axios({
        method:'get',
        url:'http://localhost:5000/reader/myShareSearch',
        params:{
            'userId':this.userId,
            'keywords':this.keywords
        }
       
    }).then(r=>{//发送成功
        this.bookShareList=r.data.data
        console.log(this.bookShareList)
    }).catch(r=>{
        console.log(r)
    })
    }
  },
};
</script>

<style scoped>
.oneRow {
  width: 30%;
  height: 40px;
  margin-top: 30px;
  margin-left: 750px;
  background-color: rgba(229, 229, 229, 1);
  border-radius: 55px;
}
.secondRow {
  width: 15%;
  height: 6%;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 50px;
  background-color: rgba(237, 209, 209, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.threeRow {
  width: 90%;
  margin-left: 50px;
  margin-bottom: 20px;
}
.icon {
  height: 100%;
  width: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input {
  width: 65%;
  height: 100%;
}
.btn {
  height: 100%;
  width: 22%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-icon {
  height: 80%;
  width: auto;
}
.input-style {
  width: 100%;
  height: 100%;
  border-color: transparent;
  background-color: transparent;
  outline: none;
  font-size: 18px;
}
.search-btn {
  height: 70%;
  width: 90%;
  border-radius: 40px;
  background-color: #394a79;
  color: white;
  border: transparent;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: 1.5px;
}
.title {
  font-size: 16px;
  letter-spacing: 2px;
}
::v-deep .custom_stripe {
  background-color: rgba(241, 241, 241, 1);
}
</style>